<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <title>教务管理系统</title>
    <%--引入easyui  前端UI框架--%>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.8.6/demo/demo.css">
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.8.6/locale/easyui-lang-zh_CN.js"></script>
    <style>
        /*改变布局方式  弹性布局*/
        body {
            display: flex;
            width: 100%;
            height: 100vh;
            justify-content: center;/*页面内元素居中*/
            align-items: center;/*子元素居中*/
            /*取消元素内外边距*/
            padding: 0;
            margin: 0;
            background-image: url("imgs/login.jpg");
        }
        .login-container{
            width: 100%;
            max-width: 400px;
            border: 1px solid #ccc;
            background: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
        }
        .messager-error{
            background-color: red;
        }
    </style>
</head>
<body>

<%--登录页面  全局居中表单登录界面  登录表单  接口名称为  login  采用弹性布局排版页面--%>
<div class="login-container">
    <form id="loginForm" action="login" method="get">
        <div style="padding: 50px 60px">
            <%--表单账号密码输入框   设置控件内边距--%>
            <div style="margin-bottom: 20px">
                <input class="easyui-textbox"
                       prompt="请输入用户名"
                       name="userName"
                       value="${requestScope.UserName}">
            </div>
            <div style="margin-bottom: 20px">
                <input class="easyui-passwordbox"
                       prompt="请输入密码"
                       name="passWord"
                       value="${requestScope.Password}">
            </div>
            <%--登录重置按钮--%>
            <a href="#" onclick="$('#loginForm').submit()" class="easyui-linkbutton">登录</a>
            <a href="#" class="easyui-linkbutton">重置</a>
            <%--通过jstl  获取登录请求返回结果，一般是失败的请求结果--%>
            <span class="messager-error">
            <%--通过RequestScope获取错误的登录信息--%>
                <c:if test="${not empty requestScope.error}">
                    ${requestScope.error}
                </c:if>
            </span>
        </div>

    </form>
</div>


</body>
</html>